<template>
  <div class="kind">
    <h2 style="margin-top: 0;">推荐榜单</h2>
    <div class="body">
      <div class="imgcard" v-for="item in tjRankList" @click="toPlayListPage(item.id)"
           :style="`background: url(${item.coverImgUrl}) center / cover;`">
        <el-icon >
          <i-bi-pause-fill v-if="item.id === playSongId && isPlayed" @click.stop="stopPlay"/>
          <i-bi-play-fill v-else @click.stop="playAll(item.id)" class="playicon"/>
        </el-icon>
        <span>{{item.updateFrequency}}</span>
      </div>
    </div>
    <h2>官方榜单</h2>
    <div class="body">
      <div class="card" v-for="item in gfRankList" @click="toPlayListPage(item.id)">
        <div class="title">
          <b>{{item.name}}</b>
          <span>{{item.updateFrequency}}</span>
        </div>
        <div class="show">
          <div :style="`background: url(${item.coverImgUrl}) center / cover;`">
            <el-icon >
              <i-bi-pause-fill v-if="item.id === playSongId && isPlayed" @click.stop="stopPlay"/>
              <i-bi-play-fill v-else @click.stop="playAll(item.id)" class="playicon"/>
            </el-icon>
          </div>
          <div class="songlist">
            <div v-for="song in item.tracks">{{song.first}} - <span>{{song.second}}</span></div>
          </div>
        </div>
      </div>
    </div>
    <h2>曲风榜单</h2>
    <div class="body">
      <div class="imgcard" v-for="item in stylesRankList" @click="toPlayListPage(item.id)"
           :style="`background: url(${item.coverImgUrl}) center / cover;`">
        <el-icon >
          <i-bi-pause-fill v-if="item.id === playSongId && isPlayed" @click.stop="stopPlay"/>
          <i-bi-play-fill v-else @click.stop="playAll(item.id)" class="playicon"/>
        </el-icon>
        <span>{{item.updateFrequency}}</span>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import {topListDetail,playlistdetail} from '@/assets/apis/http';
import { computed, reactive } from "vue";
import { useRouter } from "vue-router";
import {usePlayStore} from '@/store/PlayStore'
import { Song,TopGeDan } from "@/assets/apis/MusicDataType";
import util from "@/tools/util";
import emitter from "@/store/emitter";

const router = useRouter()
const playstore = usePlayStore()
//推荐榜单
const tjRankList = reactive<TopGeDan[]>([])
//官方榜单
const gfRankList = reactive<TopGeDan[]>([])
//曲风排行榜
const stylesRankList = reactive<TopGeDan[]>([])
const playSongId = computed(()=>playstore.playListId)
const isPlayed = computed(()=>playstore.isPlayed)
const getToplist = async() => {
  const res = await topListDetail();
  console.log("所有榜单",res)
  let newSongs = res.list.filter(item => item.ToplistType).map(rankItem => {
    return {
      id: rankItem.id,
      name: rankItem.name,
      coverImgUrl: util.formatSongsPic(rankItem.coverImgUrl,200),
      updateFrequency: rankItem.updateFrequency,
      description: rankItem.description,
      tracks: rankItem.tracks
    };
  });
  gfRankList.splice(0,gfRankList.length,...newSongs)

  newSongs = res.list.filter(item =>
    ["云音乐电音榜", "云音乐古典榜", "云音乐ACG榜","云音乐摇滚榜","云音乐国风榜","云音乐民谣榜","中文慢摇DJ榜","BEAT排行榜"].includes(item.name)
  ).map(rankItem => {
    return {
      id: rankItem.id || null,
      name: rankItem.name || '未知',
      coverImgUrl: util.formatSongsPic(rankItem.coverImgUrl,200),
      updateFrequency: rankItem.updateFrequency || '未知',
      description: rankItem.description || '暂无描述',
      tracks: rankItem.tracks || []
    };
  });
  stylesRankList.splice(0,gfRankList.length,...newSongs)
  newSongs = res.list.filter(item =>
    ["网络热歌榜", "云音乐赞赏榜", "蛋仔派对听歌榜","听歌识曲榜"].includes(item.name)
  ).map(rankItem => {
    return {
      id: rankItem.id || null,
      name: rankItem.name || '未知',
      coverImgUrl: util.formatSongsPic(rankItem.coverImgUrl,200),
      updateFrequency: rankItem.updateFrequency || '未知',
      description: rankItem.description || '暂无描述',
      tracks: rankItem.tracks || []
    };
  });
  tjRankList.splice(0,gfRankList.length,...newSongs)
}
function toPlayListPage(id:number){
  router.push({path:"/gedan/"+id})
}
async function playAll (id:number){
  //如果暂停之前正处于播放当前歌单，仅仅是切换播放状态
  if (playstore.playListId === id) {
    emitter.emit('playAudioType','play')
    return
  }
  let res = await playlistdetail({ id: id, s: 0 });
  // console.log("查询榜单内歌曲",res)
  let newSongs: Song[] = res.playlist.tracks.map(song => {
    return {
      id: song.id || null,
      name: song.name || '未知',
      mvId: song.mv,
      albumPic: util.formatSongsPic(song.al.picUrl,100),
      singer: song.ar.map(({ name, id }) => ({ name, id })),
      album: song.al.name,
      alia: song.alia[0],
      duration: song.dt,
      url: "https://music.163.com/song/media/outer/url?id="+song.id+".mp3",
      fee: song.fee,
      publishTime: song.mark
    };
  });
  playstore.playAll(newSongs)
  playstore.playListId = id
}
function stopPlay(){
  emitter.emit('playAudioType','play')
}
getToplist()
</script>
<style scoped lang="scss">
.kind{
  color: var(--el-text-color-primary);
  h2{
    margin-left: 20px;
  }
  .body{
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 20px;
    margin-left: 20px;
  }
  .imgcard {
    background-color: var(--transparent-1);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    flex: 0 1 calc(18%);
    aspect-ratio: 1 / 1;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    i {
      font-size: 60px;
      .playicon{
        visibility: hidden;
      }
    }

    span{
      padding-top: 20px;
    }
    &:hover i .playicon {
      visibility: initial;
    }
  }
  .card {
    background-color: var(--transparent-1);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    flex: 0 1 calc(45%);
    aspect-ratio: 3 / 1;
    margin-bottom: 10px;
    cursor: pointer;
    padding: 12px;
    .title{
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-left: 20px;
      padding-right: 20px;
      padding-bottom: 10px;
      b{
        font-size: 20px;
      }
      span {
        display: block;
      }
    }
    .show {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      >div:first-child{
        display: grid;
        place-items: center;
        aspect-ratio: 1 / 1;
        width: 25%;
        border-radius: 10px;
        font-size: 50px;
        .playicon {
          display: none;
        }
      }

      .songlist {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        height: 90%;
        padding-left: 10px;
        >div{
          white-space: nowrap;
          overflow: hidden;
          color: var(--el-text-color-regular);
        }
      }
    }
    &:hover{
      .show >div .playicon{
        display: block;
      }
    }
  }
}
</style>
